import React, { useState, useEffect } from 'react'
import { useLocation } from 'react-router-dom'
import './index.less'
import { Play, CommentO, CartCircleO, Search, FireO } from '@react-vant/icons';
import { history } from 'umi';
import axios from 'axios'
import { Input, Button, Cell, Tabs, ActionSheet, Stepper,Toast } from 'react-vant';
import { Radio } from 'antd';


export default function Index() {



  const location = useLocation()
  const items = ['新品', '平价', '人气'];
  const [list, setlist] = useState([])
  const [cate, setcate] = useState(location.state.obj.cate)
  const [head, sethead] = useState(0)
  const [title, settitle] = useState('')
  const [num, setnum] = useState(6)
  const [obj, setobj] = useState({})

  const [user_index, setuser_index] = useState(-1)



  // 关闭图标
  const [visible, setVisible] = useState(false)
  const onCancel = () => setVisible(false)

  useEffect(() => {
    getlist()
    window.addEventListener('scroll', han)
  }, [cate, head])


  const getlist = async () => {
    const { data } = await axios.get('http://localhost:3000/zgh_cate_look', {
      params: {
        cate: cate,
        head: head,
        title: title
      }
    })
    console.log(data)
    setlist(data.data)
  }

  // 人气值
  const ren = async (val) => {
    val.ren += 1
    await axios.put('http://localhost:3000/zgh_cate_edit', val)
  }


  // 监听滚动事件
  window.onscroll = function () {
    if (window.innerHeight + window.scrollY >= document.body.scrollHeight - 1) {
      setnum(num + 4)
    }
  }

  // 控制返回顶部
  const [op, setop] = useState(false)
  const han = () => {
    if (window.scrollY >= 500) {
      setop(true)
    } else {
      setop(false)
    }
  }

  // 后端操作

  // 数量修改
  const edit_num = async (v) => {
    let data = { ...obj }
    data.num = v
    await axios.put('http://localhost:3000/zgh_cate_edit', data)
    setobj(data)
    getlist()
  }


  return (
    <div className='zgh_fenlei'>

      {/* 头部 */}
      <div className='top'>

        <div>
          <Play rotate={180} className='top_an' onClick={() => {
            history.push('/app/cast')
          }} />
          {location.state.obj.title}
        </div>
        <div>   </div>

      </div>

      {/* 搜索框 */}
      <div className='select'>
        <Cell>
          <Input
            clearable
            prefix={<Search className='select_btn' />}
            placeholder="请输入关键字"
            value={title}
            onChange={(e) => {
              console.log(e);
              settitle(e)
            }}
            onKeyDown={(e) => {
              if (e.keyCode == 13) {
                getlist()
              }
            }}
          />
        </Cell>
      </div>

      {/* 列表渲染内容 */}
      <div className='demo-tabs'>
        <Tabs defaultActive={head} onChange={(e) => {
          console.log(e)
          sethead(e)
        }}>
          {items.map(item => (
            <Tabs.TabPane key={item} title={`${item}`}>

              {
                list.slice(0, num).map((ele, index) => {
                  return <div className='con' key={index}>
                    <img src={ele.img} onClick={() => { ren(ele) }} />
                    <div>
                      <p>{ele.title}</p>
                      <p><font color='red'>￥{ele.price}</font></p>
                      <CartCircleO color='#fff' className='con_btn'
                        onClick={() => {
                          // 模态框展示
                          setVisible(true)
                          setobj(ele)
                          console.log(ele);
                        }} />
                    </div>
                  </div>
                })
              }
            </Tabs.TabPane>
          ))}
        </Tabs>
      </div>

      <div className='go_top' style={{ display: op ? 'block' : 'none' }} onClick={() => {
        window.scrollTo({
          top: 0,
          behavior: 'smooth'
        })
      }}>↑</div>

      <ActionSheet visible={visible} onCancel={onCancel}>
        <div className='mtk'>
          <div className='mtk_top'>
            <img src={obj.img} alt="" />
            <div>
              <p>{obj.title}</p>
              <p>￥{obj.price}</p>
            </div>
          </div>
          <p className='mtk_one_p'>净含量</p>
          <div className='mtk_bottom'>
            {
              [500, 400, 300].map((ele, index) => {
                return <Button key={index} plain type='info' style={{ padding: '5px 25px' }}
                  className={user_index == index ? 'mtk_action' : ''}
                  onClick={() => {
                    console.log(ele, index);
                    setuser_index(index)
                  }}>{ele}g</Button>
              })
            }
          </div>
          <p className='mtk_one_p'>购买数量</p>
          <div className='mtk_num'>
            <Stepper
              inputWidth='88px'
              buttonSize='36px'
              min={0}
              value={obj.num}
              onChange={v => {
                edit_num(v)
              }}
            />
          </div>

          <div className='mtk_end' onClick={() => {
            setVisible(false)
            Toast({
              message: '加入购物车',
              icon:<CartCircleO  />,
            })
          }}>
            加入购物车
          </div>

        </div>
      </ActionSheet>
    </div>
  )
}
